<template>
	<view class="wrap">
		<view class="top">
			<image src="../static/image/013.png" mode=""></image>
		</view>
		<view class="main-wrapper">
			<view class="main">
				<view class="title oneline flex flex-h-center">
					不好意思啊，临时有事停车，我会尽快回来~
				</view>
				<view class="tips oneline flex flex-h-center">
					为了保护双方的隐私，以下通话将使用虚拟号码
				</view>
				<view class="car-wrapper">
					<view class="car flex flex-h-start flex-v-center">
						<label for="">车牌号</label>
						<input type="text" @click="done" v-model="carNo" placeholder="请输入车牌号" placeholder-style="font-family: HiraginoSansGB-W3;font-size: 30rpx;color: #999;" disabled/>
					</view>
				</view>
				<view class="call flex flex-h-center">
					<text class="flex flex-h-center flex-v-center" @click="call">匿名呼叫挪车</text>
				</view>
			</view>
		</view>
		<u-keyboard ref="uKeyboard" mode="car" v-model="show" @change="valChange" @backspace="backspace" @confirm="confirm"></u-keyboard>
		<!-- <u-select v-model="show" mode="single-column" :list="list" @confirm="confirm"></u-select> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				carNo:'',
				mobile:'',
				show:false
			}
		},
		onLoad() {
			
		},
		onShow() {
		   // this.mobile = uni.getStorageSync("mobile");	sssss
		   let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
		   let curRoute = routes[routes.length - 1].route //获取当前页面路由
		   this.url = curRoute;
		    
			  if(!uni.getStorageSync('token')){
				uni.navigateTo({
					url:"./login/login"
				})
				 uni.setStorageSync('url', this.url);
			  }
			  
		},
		methods: {
			// 回调参数为包含多个元素的数组，每个元素分别反应每一列的选择情况
			// confirm(e) {
			// 	console.log(e);
			// 	this.area = e[0].label;
			// },
			// sel() {
			// 	this.show = true;
			// },
			done() {
				this.show = true;
			},
			valChange(val) {
				// 将每次按键的值拼接到value变量中，注意+=写法
				this.carNo += val;
				console.log(this.carNo);
			},
			// 退格键被点击
			backspace() {
				// 删除value的最后一个字符
				if (this.carNo.length) this.carNo = this.carNo.substr(0, this.carNo.length - 1);
				console.log(this.carNo);
			},
			confirm(){
				console.log(1)
				this.getMobile();
			},
			getMobile(){
				this.$https.request('/cli/getCarPhone', true, {
					carNo:this.carNo
				}).then((res) => {
					if (res.code == 0) {
						this.mobile = res.msg;
							
					}else if (res.code == 201) {
						uni.navigateTo({
							url:'../login/login'
						})
						uni.setStorageSync('url', this.url);
					} else {
						this.LoadingMsg(res.msg);
						setTimeout(function() {
							uni.hideLoading();
						}, 1000)
					}
							
				})
			},
			
			
			
			call(){
				if (this.carNo=='') {
				   this.toastMsg("车牌号不正确");
					return;
				}
				if (this.mobile=='') {
				   this.toastMsg("手机号码不正确");
					return;
				}
				
				uni.makePhoneCall({
					 phoneNumber: this.mobile //仅为示例
				}); 
				
			}
		}
	}
</script>
<style>
	page {
		background-color: #F6FAFD;
	}
</style>
<style lang="scss">
	.wrap {
		.main-wrapper {
			padding: 30rpx;

			.main {
				background-color: #fff;
				padding: 40rpx 30rpx;
                .title {
                	font-family: HiraginoSansGB-W3;
                	font-size: 32rpx;
                	color: #333;
                	font-weight: 900;
                }
                
                .tips {
                	font-family: HiraginoSansGB-W3;
                	font-size: 24rpx;
                	color: #333;
                	padding: 40rpx 0 60rpx 0;
                }
				.car-wrapper {
					padding-bottom: 50rpx;

					.car {
						background-color: #F6F6F6;
						height: 80rpx;
						width: 640rpx;
						border-radius: 10rpx;

						label {
							display: flex;
							justify-content: flex-end;
							align-items: center;
							width: 140rpx;
							padding-right: 10rpx;
							font-family: HiraginoSansGB-W3;
							font-size: 30rpx;
							color: #333;
						}

						button {
							display: flex;
							justify-content: flex-end;
							align-items: center;
							width: 150rpx;
							font-family: HiraginoSansGB-W3;
							font-size: 30rpx;
							color: #333;

						}
						input{
							padding-left:20rpx;
						}
					}
				}

				.call {
					text {
						background-color: #2A90FF;
						border-radius: 10rpx;
						height: 80rpx;
						width: 640rpx;
						font-family: HiraginoSansGB-W6;
						font-size: 30rpx;
						color: #fff;
					}
				}

				
			}
		}

		.top {
			image {
				width: 100%;
				height: 300rpx
			}
		}
	}
</style>
